<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<!-- 垂直方向对象属性  vertical-algin
			 使用方法：1.用于表格中单元格垂直居中
					  2.用于行内元素以及行内块元素的垂直居中
						【文本和图片垂直居中效果】
						对齐分为四种：基线对齐，顶部对齐
									居中对齐，底部对齐
						元素种类：块元素，行元素，行内块元素
						块元素特点：独占一行，可以设置宽高
						行元素特点：一行内显示，不可设置宽高
						行内块元素：
						网页：元素之间嵌套生成
						行元素与块元素可以任意嵌套
						前提：设置宽高---块套行 可以
									----块套块 可以
						前提：一行内显示---行套快
									  ---行套行
									  ---块套行
		 -->
		 <style>
			body p:nth-child(1) img{
				/* vertical-align:baseline 默认基线对齐 */
				vertical-align: baseline;
				color: #cbc9ff;
				
			}
			body p:nth-child(2) img{
				color: aqua;
				/* vertical-align:top 顶部对齐对齐 */
				vertical-align: top;
				
			}
			body p:nth-child(3) img{
				color: antiquewhite;
				/* vertical-align:middle 居中对齐 */
				vertical-align: middle;
			}
			body p:nth-child(4) img{
				color: brown;
				/* vertical-align:bottom 底部对齐 */
				vertical-align: bottom;
			}
		 </style>
	</head>
	<body>
		<!-- 需求结构：4个段落，嵌套图片名字 写上去 
							文字后加img, 设定宽高：25~100px
							每个图片后边：基线对齐，顶部对齐
							居中对齐，底部对齐
		-->
		<p>仓鼠 <img src="img/仓鼠.png" alt="仓鼠 " width="50px" height="50px"/> 基线对齐</p>
		<p>荷兰猪 <img src="img/荷兰猪.png" alt="荷兰猪" width="50px" height="50px"/> 顶部对齐</p>
		<p>小狗 <img src="img/小狗.png" alt="小狗" width="50px" height="50px"/> 居中对齐</p>
		<p>小猫咪 <img src="img/小猫咪.png" alt="小猫咪" width="50px" height="50px"/> 底部对齐</p>
		<!-- css选择器--抓第一张照片.....
			思路：派生选择器：找后代+伪类选择器 ，添加效果
			p img:nth-child(1)
		 -->
	</body>
</html>